<template>
	<div class="box">
		<div class="title">
			本月个人维修量
		</div>
		<!-- <div class="bar-title">
			<span class="t1">人名</span>
			<span class="t2">占比</span>
			<span class="t3">数量</span>
		</div> -->
		<Echart :id="id" :options="options" :t="t" height="100%" width="100%"></Echart>
	</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
	data() {
		return {
			id: "Right1_2"
		}
	},
	components: {
		Echart,
	},
	props: {
		options: {
			type: Object,
			default: () => ({})
		},
		t: {
			type: String,
			default: '0'
		}
	},
}
</script>

<style lang="scss" scoped>
$box-width: 100%;
$box-height: 100%;

.box {
	height: $box-height;
	width: $box-width;
	background-image: url("../../assets/hqrepair/box-1940.png");
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;

	.title {
		font-size: 1.2vw;
		line-height: 2.2vw;
		text-shadow: 2px 1px 0px rgba(0, 31, 61, 0.46);
		text-align: center;
		color: #fff;
		font-family: DingTalk JinBuTi;
	}

	.bar-title{
		height: 6%;
		position: relative;
		span{
			position: absolute;
			font-size: 0.9vw;
			font-family: Alibaba_275;
			color: #00F9FF;
			&.t1{
				left: 3.4vw;
			}
			&.t2{
				left: 6.4vw;
			}
			&.t3{
				right: 1.2vw;
			}
		} 
	}
}
</style>
